<template>
    <div id="energy-chart" :style="{width: '100%', height: curHeight}"></div>
</template>

<script>
import * as echarts from "echarts"

export default {
    props: ["height"],
    mounted() {
        this.initChart()
    },
    data() {
        return {
            curHeight: this.height + "px"
        }
    },
    methods: {
        initChart() {
            const chartDom = document.getElementById("energy-chart")
            const myChart = echarts.init(chartDom)
            const option = {
                title: {
                    text: "",
                    left: "50"
                },
                // subtitle: {
                // 	text: "综合能耗趋势分析",
                // 	left: "left",
                // },
                toolbox: {
                    feature: {
                        print: {},
                        export: {}
                    },
                    right: 10
                },
                tooltip: {
                    trigger: "axis",
                    axisPointer: {
                        type: "shadow"
                    }
                },
                xAxis: [
                    {
                        type: "category",
                        data: ["2024-06-02", "2024-06-06", "2024-06-10", "2024-06-14", "2024-06-18", "2024-06-22", "2024-06-22", "11:00", "12:00", "13:00", "14:00"],
                        axisTick: {
                            alignWithLabel: true
                        }
                    }
                ],
                yAxis: [
                    {
                        type: "value"
                    }
                ],
                series: [
                    {
                        name: "总表能耗",
                        type: "bar",
                        data: [
                            2200000, 2100000, 1100000, 2600000, 1100000, 1300000, 600000, 1200000, 1000000, 2300000, 2200000, 1400000, 1100000, 1000000, 2300000, 2300000, 1200000,
                            1100000, 1000000
                        ]
                    },
                    {
                        name: "分表总能耗",
                        type: "bar",
                        data: [
                            700000, 1000000, 1700000, 1500000, 1800000, 2500000, 1100000, 1200000, 1300000, 2000000, 2400000, 1300000, 1200000, 2000000, 2500000, 1200000, 1300000,
                            1400000, 2000000
                        ],
                        lineStyle: {
                            color: "green"
                        }
                    },
                    {
                        name: "趋势",
                        type: "line",
                        data: [
                            1300000, 1600000, 900000, 1900000, 1200000, 1500000, 900000, 1600000, 1700000, 1100000, 1800000, 1700000, 800000, 1700000, 1900000, 1200000, 1500000,
                            1300000, 1200000
                        ],
                        lineStyle: {
                            color: "orange"
                        }
                    }
                ]
            }
            myChart.setOption(option)
        }
    }
}
</script>

<style scoped>
/* 可根据需要添加样式 */
</style>
